// 我的求购
<template>
  <div class="myQuotation">
    <ul class="title">
      <li v-for="(item,key) in title" :key="key" class="active" @click="changesjump($event,key)">
        {{item.name}}
        <i v-show="item.num">({{item.num}})</i>
      </li>
    </ul>

    <div v-loading="loading">
      <no-data :msg="msg" v-if="!tableData"/>
      <!-- <div v-if="!tableData" class="empty">您尚未发布求购信息，请到首页点击“发布求购”进行发布。</div> -->
      <div v-else class="tablek" v-for="(item,index) in tableData" :key="index">
        <el-table :data="item.data" style="width: 100%">
          <!-- <el-table-column prop="Model" label="产品型号"></el-table-column> -->
          <el-table-column prop="brand_name" label="品牌" ></el-table-column>

          <el-table-column prop="goods_number" label="求购数量" width="95"></el-table-column>

          <el-table-column prop="lowest_price" label="最低单价要求(元)" width="135"></el-table-column>

          <el-table-column prop="end_time" label="报价截止日期 " width="140"></el-table-column>

          <el-table-column prop="review" label="审核状态" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.review == 1" style="color:#66b1ff">审核中...</div>
              <div v-else-if="scope.row.review == 2" style="color:green">审核已通过</div>
              <div v-else style="color:red">审核未通过</div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click.native.prevent="deleteRow(scope.$index, item)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <p class="derible">求购单号：{{ item.single_num }} 发布日期：{{ item.create_at }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "wantBuy",

  data() {
    return {
      title: [
        {
          name: "我的求购",
          id: 0
        }
      ],
      msg: '暂无相关数据...',
      loading: true,
      empty: false,
      tableData: [
        // [
        //   {
        //     Model: "ERV700-6-AB-Ae00a",
        //     brand: "为了区分是否删除错误而生成的品牌",
        //     num: "200",
        //     miniPrice: "40.00",
        //     ClosingDate: "2018-09-15",
        //     state: "未报价",
        //     color: false,
        //     derible: "求购单号：20180907000001    发布日期：2018-09-07"
        //   },
        //   {
        //     Model: "ERV700-6-AB-Ae00a",
        //     brand: "好品牌好品牌好品牌",
        //     num: "200",
        //     miniPrice: "40.00",
        //     ClosingDate: "2018-09-15",
        //     state: "未报价",
        //     color: false
        //   },
        //   {
        //     Model: "ERV700-6-AB-Ae00a",
        //     brand: "好品牌好品牌好品牌",
        //     num: "200",
        //     miniPrice: "40.00",
        //     ClosingDate: "2018-09-15",
        //     state: "已报价",
        //     color: true
        //   }
        // ],
        // [
        //   {
        //     Model: "ERV700-6-AB-Ae00a",
        //     brand: "好品牌好品牌好品牌",
        //     num: "200",
        //     miniPrice: "40.00",
        //     ClosingDate: "2018-09-15",
        //     state: "未报价",
        //     color: false,
        //     derible: "求购单号：20180907000001    发布日期：2018-09-07"
        //   }
        // ]
      ]
    }
  },

  methods: {
    // 获取数据
    async getUserWantToBuy(page = 1) {

      let user_id = this.$store.state.UserInfor.user_id
      let res = await this.$http({
        method: 'post',
        url: '/api/index/web/getUserBuyingList',
        data: {
          user_id,
          page
        }
      })
      console.log(1)
      this.loading = false
      if (res.data.State.Code == 200) {
        console.log(res)
        this.tableData = res.data.data

      } else {
        this.tableData = res.data.data

      }
    },
    // 删除这一行
    async deleteRow(index, item) {
      // console.log(index, item)
      let single_num = item.single_num
      let id = item.data[index].id
      console.log(single_num, id)
      let res = await this.$http({
        method: 'post',
        url: '/api/index/web/delUserBuying',
        data: {
          single_num,
          id
        }
      })
      if (res.data.State.Code == 200) {
        this.getUserWantToBuy()
        this.$notify({
          title: '已成功删除...',
          type: 'success'
        })
      }

    },

    changesjump(ev, key) {
      this.index = key
      console.log(this.index)
    }
  },
  created() {
    this.getUserWantToBuy()
  }
}
</script>
<style lang="scss" scoped>
.myQuotation {
  width: 970px;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
  .NumberOfBars {
    color: #ff9000;
    font-size: 12px;
    text-indent: 20px;
    line-height: 40px;
  }
  .tablek {
    padding: 15px 0px;
    font-size: 12px;
    .el-table {
      // 修改 sass的样式 这个在scope中的使用 原型为 >>>
      /deep/ .cell {
        text-align: center;
      }
      // /deep/ td{
      //     border: none;
      //     border-right: 1px solid #ebeef5;
      //     border-bottom: 1px solid #ebeef5;
      //     &:first-child{
      //         border-left: 1px solid #ebeef5;
      //     }
      //     &:last-child{
      //         border-bottom: none;
      //     }
      // }
    }
  }
  .empty {
    width: 100%;
    height: 400px;
    margin-top: 20px;
    font-size: 30px;
    line-height: 400px;
    text-align: center;
    color: #dbdbdb;
    border: 1px dashed #dbdbdb;
  }
  .derible {
    line-height: 30px;
    text-align: right;
    padding-bottom: 10px;
    color: rgb(206, 208, 209);
    font-size: 12px;
  }
}
</style>
<style>
